﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="CourseReport.aspx.cs" Inherits="CMSWCSFSolution.CMS.Views.CourseReport"
    Title="CourseReport" MasterPageFile="~/Shared/DefaultMaster.master" %>

<asp:Content ID="headcontent" ContentPlaceHolderID="HeadContent" runat="server">
    <link href="../Scripts/cupertino/jquery-ui-1.8.24.custom.css" rel="stylesheet" type="text/css" />
    <link href="../Scripts/cupertino/ui.jqgrid.css" rel="stylesheet" type="text/css" />
    <script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script src="../Scripts/jquery.validate.js" type="text/javascript"></script>
    <script src="../Scripts/cupertino/grid.locale-en.js" type="text/javascript"></script>
    <script src="../Scripts/cupertino/jquery.jqGrid.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        //Validate for Input CourseName
        $().ready(function () {
            $("#mainForm").validate();
            $("#CourseNameTextBox").rules("add",
        {
            maxlength: 10
        }
        );
        });

        //Add jqGrid Control
        $(function () {
            jQuery("#GridTable").jqGrid({
                url: "CourseReport.aspx",
                type: 'GET',
                datatype: "json",
                colNames: ['CourseId', 'CourseName', 'CourseStatus', 'TeacherName', 'LevelName', 'StudentNumber'],
                colModel: [
                { name: 'CourseId', index: 'CourseId', sorttype: "int", width: 100 },
                { name: 'CourseName', index: 'CourseName', width: 100 },
                { name: 'StatusDisplay', index: 'StatusDisplay', width: 100 },
                { name: 'TeacherName', index: 'TeacherName', width: 100 },
                { name: 'LevelName', index: 'LevelName', width: 100 },
                { name: 'StudentNumber', index: 'StudentNumber', width: 100 }
                ],
                jsonReader: {
                    root: "griddata",
                    total: "totalpages",
                    page: "page",
                    records: "totalrecords",
                    repeatitems: false
                },
                height: "100%",
                viewrecords: true,
                rowNum: 5,
                sortable: true,
                sortorder: "Asc",
                pager: "#Pager",
                caption: "Course Report",
                pgbuttons: true
            }).navGrid('#Pager', { add: false, edit: false, del: false, search: false, refresh: false });
        });

        //SearchFunction
        $(function () {
            jQuery("#Generate").click(function () {
                var courseName = jQuery("#CourseNameTextBox").val();
                var open = jQuery("#OpenCheckBox").attr("checked");
                var closed = jQuery("#ClosedCheckBox").attr("checked");
                var selectTeacher = document.getElementById("TeacherNameDropDownList");
                var teacherName = selectTeacher.options[selectTeacher.selectedIndex].text;
                var selectLevel = document.getElementById("LevelNameDropDownList");
                var levelName = selectLevel.options[selectLevel.selectedIndex].text;
                $("#GridTable").jqGrid('setGridParam', {
                    url: "CourseReport.aspx",
                    postData: { 'action': "search", 'courseName': courseName, 'open': open, 'closed': closed, 'teacherName': teacherName, 'levelName': levelName }, //send data
                    page: 1
                }).trigger("reloadGrid");
            });
        });
    </script>
</asp:Content>
<asp:Content ID="content" ContentPlaceHolderID="DefaultContent" runat="Server">
    <h1>
        CourseReport</h1>
    <div>
        <fieldset id="searchcriteria" runat="server">
            <legend>Search Criteria</legend>
            <asp:Table ID="Condition" runat="server"><%-- Height="106px" Width="580px"--%>
                <asp:TableRow ID="TableRow1" runat="server" HorizontalAlign="Right">
                    <asp:TableCell ID="TableCell1" runat="server">
                        <asp:Label runat="server" ID="Lable1" Text="Course Name"></asp:Label></asp:TableCell>
                    <asp:TableCell ID="TableCell2" runat="server">
                        <asp:TextBox ID="CourseNameTextBox" Width="150px" runat="server" ClientIDMode="Static"></asp:TextBox></asp:TableCell>
                    <asp:TableCell ID="TableCell3" runat="server">
                        <asp:Label ID="Label2" runat="server" Text="   Course Status"></asp:Label></asp:TableCell>
                    <asp:TableCell ID="TableCell4" runat="server">
                        <input type="checkbox" id="OpenCheckBox" value="Open" />Open
                        <input type="checkbox" id="ClosedCheckBox" value="Closed" />Closed
                    </asp:TableCell>
                </asp:TableRow>
                <asp:TableRow ID="TableRow2" runat="server" HorizontalAlign="Right">
                    <asp:TableCell ID="TableCell5" runat="server">
                        <asp:Label runat="server" Text="Teacher Name" ID="Lable3"></asp:Label></asp:TableCell>
                    <asp:TableCell ID="TableCell6" runat="server">
                        <asp:DropDownList runat="server" ID="TeacherNameDropDownList" Width="155px" ClientIDMode="Static">
                        </asp:DropDownList>
                    </asp:TableCell>
                    <asp:TableCell ID="TableCell7" runat="server">
                        <asp:Label runat="server" ID="Label4" Text="Course Level"></asp:Label></asp:TableCell>
                    <asp:TableCell ID="TableCell8" runat="server">
                        <asp:DropDownList runat="server" ID="LevelNameDropDownList" Width="150px" ClientIDMode="Static">
                        </asp:DropDownList>
                    </asp:TableCell>
                    <asp:TableCell ID="TableCell9" runat="server">
                    <input type="button" id="Generate" value="Generate Report" />
                    </asp:TableCell>
                </asp:TableRow>
            </asp:Table>
        </fieldset>
        <fieldset class="bold" id="result" runat="server">
            <legend>Course Report</legend>
            <table id="GridTable">
            </table>
            <div id="Pager">
            </div>
        </fieldset>
    </div>
</asp:Content>
